import React, { PureComponent, Fragment } from 'react';
import { Select ,Divider} from 'antd';
import styles from './index.less';

const {Option} = Select;
export default class SelectWidthAction extends PureComponent {
    static getDerivedStateFromProps(nextProps) {
      // Should be a controlled component.
      if ('value' in nextProps) {
        return {
          ...(nextProps.value || []),
        };
      }
      return null;
    }
  
    constructor(props) {
      super(props);  
      console.log(props,123)      
      const value = props.value || [];
      this.state = {
        list:value,
      };
    }
  
    componentDidMount(){
        console.log(this.props)
    }
    handleChange = (val) => {  
      const {_this}=this.props;    
      this.triggerChange(val);
      console.log(_this)
      if(_this){
        _this.setState({
          templateId:val
        })
      }
    }
  
    triggerChange = (changedValue) => {
      // Should provide an event to pass value to Form.
      const onChange = this.props.onChange;
      if (onChange) {
        onChange(changedValue);
      }
    }

    triggerClick = (index) => {
        // Should provide an event to pass value to Form.
        const {actions} = this.props;
        if (actions&&actions[index]) {
            if(typeof actions[index] === "function"){
                actions[index]();
            }         
        }
      }
  
    render() {
      const { size,actionText,value,_this } = this.props;
      const action=actionText||this.props["data-__meta"].actionText;
      const state = this.state;         
      return (
        <span style={{whiteSpace:'nowrap',display:'table',width:'100%'}}>          
          <Select
            value	={_this.state.templateId||''}
            size={size}          
            onChange={this.handleChange}
            style={{display:'table-cell'}}
          >
            {
                value.map((item,index)=>{
                    return <Option value={item.Id} key={item.Id}>{item.Name}</Option>
                })
            }                       
          </Select>
          <div className={styles.btnBox}>
          {
              action.map((item,index)=>{
                return(
                <Fragment>
                  <a 
                   // className={styles.btn} 
                    onClick={()=>this.triggerClick(index)} 
                    key={index}
                  >{item}</a>
                  {
                    index+1===action.length?null:
                    <Divider type="vertical" />
                  }                  
                </Fragment>
                )                 
              })
          }
          </div>                             
        </span>
      );
    }
}